<template>
  <page-header-wrapper>
    <!-- PageHeader 第二种使用方式 (v-slot) -->
    <a-modal
      title="专家详情"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @cancel="handleCancel"
      v-if="visible"
    >
      <a-form-model ref="expertmessage" :model="expertmessage" :label-col="{span: 7}" :wrapper-col="{span: 16} ">
        <a-form-model-item label="专家姓名" prop="username" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="expertmessage.username" :disabled="true"></a-input>
        </a-form-model-item>
        <a-form-model-item label="专家身份证号码" prop="card_num" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="expertmessage.card_num" :disabled="true"></a-input>
        </a-form-model-item>
        <a-form-model-item label="专家性别" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-select v-model="expertmessage.sex" :disabled="true">
            <a-select-option value="男">
              男
            </a-select-option>
            <a-select-option value="女">
              女
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="专家所属单位" prop="company_name" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="expertmessage.company_name" :disabled="true"></a-input>
        </a-form-model-item>
        <a-form-model-item label="专家手机号码" prop="phone" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="expertmessage.phone" :disabled="true"></a-input>
        </a-form-model-item>
        <a-form-model-item label="专家职称" prop="experts_title" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="expertmessage.experts_title" :disabled="true"></a-input>
        </a-form-model-item>
        <a-form-model-item label="职称专业" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="expertmessage.title_major" :disabled="true"></a-input>
        </a-form-model-item>
        <a-form-model-item label="专业资格" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="expertmessage.major_status" :disabled="true"></a-input>
        </a-form-model-item>
        <!-- <a-form-model-item label="专家论证类别" prop="expert_types" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="expertmessage.expert_types" ></a-input>
        </a-form-model-item> -->
        <a-form-model-item label="专家论证类别" prop="experts_types" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-select
            mode="multiple"
            style="width: 100%"
            v-model="expertmessage.experts_types"
            :disabled="true"
          >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="专家级别" prop="experts_level" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="expertmessage.experts_level" :disabled="true"></a-input>
        </a-form-model-item>
        <a-form-model-item label="创建时间" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-date-picker v-model="expertmessage.create_time" :disabled="true"></a-date-picker>
        </a-form-model-item>
        <a-form-model-item label="本人证件照" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-upload
            :file-list="expertmessage.my_photo"
            @preview="handlePreview"
            list-type="picture-card"
          ></a-upload>
        </a-form-model-item>
        <a-form-model-item label="身份证文件" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-upload
            :file-list="expertmessage.my_card_photo"
            @preview="handlePreview"
            list-type="picture-card"
          ></a-upload>
        </a-form-model-item>
        <a-form-model-item label="学历证明文件" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-upload
            :file-list="expertmessage.academic_credentials"
            @preview="handlePreview"
            list-type="picture-card"
          ></a-upload>
        </a-form-model-item>
        <a-form-model-item label="职称文件" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-upload
            :file-list="expertmessage.title_document"
            @preview="handlePreview"
            list-type="picture-card"
          ></a-upload>
        </a-form-model-item>
        <a-form-model-item label="执业资格文件" prop="" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-upload
            :file-list="expertmessage.practice_qualification_certificate"
            @preview="handlePreview"
            list-type="picture-card"
          ></a-upload>
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remarks" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="expertmessage.remarks" :disabled="true"></a-input>
        </a-form-model-item>
      </a-form-model>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelimg">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
      <template slot="footer">
        <Button type="button" class="ant-btn ant-btn-primary" @click="handleCancel">确定</Button>
      </template>
    </a-modal>
    <a-table
      :columns="columns"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :row-key="record => record.user_id"
      :data-source="dataSource"
      :rowClassName="rowClassName"
      :scroll="{ x: 1800 }"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <span slot="experts_types" slot-scope="experts_types">
        <a-tag v-for="tag in experts_types" :key="tag" :value="tag" color="blue" >
          {{ tag }}
        </a-tag>
      </span>
      <template slot="operation" slot-scope="text, record">
        <a-popconfirm
          v-if="dataSource.length"
          title="确定操作?"
          okText="确定"
          cancelText="取消"
          @confirm="() => passrecord(record)"
        >
          <a href="javascript:;">通过</a>
        </a-popconfirm>
        <a-divider type="vertical" />
        <a-popconfirm
          v-if="dataSource.length"
          title="确定操作?"
          okText="确定"
          cancelText="取消"
          @confirm="() => refuserecord(record)"
        >
          <a href="javascript:;">拒绝</a>
        </a-popconfirm>
        <a-divider type="vertical" />
        <a
          v-if="dataSource.length"
          @click="() => details(record)"
        >
          <a href="javascript:;">详情</a>
        </a>
      </template>
    </a-table>
    <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="batchpass">
      批量通过
    </a-button>
    <span style="margin-left: 8px">
      <template v-if="hasSelected">
        {{ `Selected ${selectedRowKeys.length} items` }}
      </template>
    </span>
  </page-header-wrapper>
</template>

<script>
import { getdatatable } from '@/api/argumentexpert'
import { changestatus, lotsizepass } from '@/api/changeArguexpertsta'

const columns = [
  {
    title: '姓名',
    dataIndex: 'username',
    align: 'center',
    width: 125,
    fixed: 'left',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '手机号码',
    dataIndex: 'phone',
    width: 150
  },
  {
    title: '身份证号',
    dataIndex: 'card_num',
    width: 175
  },
  {
    title: '专家职称',
    dataIndex: 'experts_title',
    width: 125
  },
  {
    title: '所属单位',
    dataIndex: 'company_name'
  },
  {
    title: '专家级别',
    dataIndex: 'experts_level',
    width: 125
  },
  {
    title: '专家类别',
    dataIndex: 'experts_types',
    scopedSlots: { customRender: 'experts_types' }
  },
  {
    title: '注册时间',
    dataIndex:'create_time',
    width: 150
  },
  {
    title: '状态',
    dataIndex: 'experts_status',
    width: 90
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    align: 'center',
    width: 207.2,
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  data () {
    return {
      visible: false,
      modal2Visible: false,
      confirmLoading: false,
      expertmessage: {},
      dataSource: [],
      selectedRowKeys: [], // Check here to configure the default column
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '50']
      },
      loading: false,
      columns,
      previewVisible: false,
      previewImage: ''
    }
  },
  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    }
  },
  created () {
    this.getdata()
  },
  methods: {
    handlePreview (file) {
      this.previewImage = file.url
      this.previewVisible = true
    },
    handleCancelimg () {
      this.previewVisible = false
      this.previewImage = ''
    },
    passrecord (record) {
      var pass = new FormData()
      pass.append('operation', 'verify')
      pass.append('all_user_ids', record.user_id)
      changestatus(pass).then(res => {
        if (res.code === 200) {
          this.$message.success('审核通过')
          this.visible = false
        } else {
          this.$message.error(res.message)
        }
      })
      setTimeout(() => {
        this.getdata()
      }, 500)
    },
    refuserecord (record) {
      var refuse = new FormData()
      refuse.append('operation', 'refuse')
      refuse.append('all_user_ids', record.user_id)
      changestatus(refuse).then(res => {
        if (res.code === 200) {
          this.$message.success('拒绝通过')
          this.visible = false
        } else {
          this.$message.error(res.message)
        }
      })
      setTimeout(() => {
        this.getdata()
      }, 500)
    },
    handleCancel () {
      this.visible = false
      this.expertmessage = {}
    },
    rowClassName () {
      return 'rowClass'
    },
    details (value) {
      this.dialogTitle = '专家详情'
      this.expertmessage = JSON.parse(JSON.stringify(value))
      this.visible = true
      console.log(this.expertmessage)
      var formdata = new FormData()
      formdata.append('type_kinds', '1')
    },
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange (pagination) {
      console.log(pagination)
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getdata()
    },
    getdata () {
      var fd = new FormData()
      fd.append('per_page', this.pagination.pageSize)
      fd.append('current_page', this.pagination.current)
      fd.append('experts_status', 0)
      this.loading = true
      getdatatable(fd).then(res => {
        this.dataSource = res.result.data
        // console.log(res.result.data)
        Object.assign(this.pagination, { 'pageSize': Number(res.result.per_page), 'total': res.result.total, 'current': res.result.current_page })
        this.loading = false
      })
    },
    batchpass () {
      this.selectedRowKeys.map(String)
      var passmes = new FormData()
      passmes.append('all_user_ids', this.selectedRowKeys)
      passmes.append('operation', 'verify')
      lotsizepass(passmes)
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false
        this.selectedRowKeys = []
        this.getdata()
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
  .steps {
    max-width: 750px;
    margin: 16px auto;
  }
  /deep/ .components-input-demo-size .ant-input {
    width: 200px;
    float: right;
  }
  /deep/ .rowClass{
    background-color: #fff;
  }
  /deep/ .ant-modal-content{
    width: 180%;
    left: -36%;
  }
</style>
